<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>我的积分</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=0">
    <!-- 电话号码不被显示为超链接 -->
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- <style>
        html,
        body {
            padding: 0;
            margin: 0;
            background-color: #667788;
            color: #efefef;
            font-family: 'Open Sans';
        }
        
        input[type=checkbox] {
            display: none;
        }
        
        .container {
            box-sizing: border-box;
            padding: 25px;
            text-align: center;
        }
        
        .container h2 {
            margin-bottom: 40px;
        }
        
        .container p {
            margin-top: 40px;
        }
        
        @-moz-keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 50px;
            }
        }
        
        @-webkit-keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 50px;
            }
        }
        
        @keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 50px;
            }
        }
        
        @keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 120px;
            }
        }
        
        @-webkit-keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 120px;
            }
        }
        
        @-moz-keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 120px;
            }
        }
        
        .check-box {
            height: 100px;
            width: 100px;
            background-color: transparent;
            border: 1px solid black;
            border-radius: 5px;
            position: relative;
            display: inline-block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -moz-transition: border-color ease 0.2s;
            -o-transition: border-color ease 0.2s;
            -webkit-transition: border-color ease 0.2s;
            transition: border-color ease 0.2s;
            cursor: pointer;
        }
        
        .check-box::before,
        .check-box::after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            height: 0;
            width: 5px;
            background-color: #34b93d;
            display: inline-block;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -o-transform-origin: left top;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            border-radius: 5px;
            content: ' ';
            -webkit-transition: opacity ease .5;
            -moz-transition: opacity ease .5;
            transition: opacity ease .5;
        }
        
        .check-box::before {
            top: 72px;
            left: 41px;
            box-shadow: 0 0 0 5px #667788;
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
        
        .check-box::after {
            top: 37px;
            left: 5px;
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }
        
        input[type=checkbox]:checked+.check-box,
        .check-box.checked {
            border-color: #34b93d;
        }
        
        input[type=checkbox]:checked+.check-box::after,
        .check-box.checked::after {
            height: 50px;
            -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
            -o-animation: dothabottomcheck 0.2s ease 0s forwards;
            -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
            animation: dothabottomcheck 0.2s ease 0s forwards;
        }
        
        input[type=checkbox]:checked+.check-box::before,
        .check-box.checked::before {
            height: 120px;
            -moz-animation: dothatopcheck 0.4s ease 0s forwards;
            -o-animation: dothatopcheck 0.4s ease 0s forwards;
            -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
            animation: dothatopcheck 0.4s ease 0s forwards;
        }
    </style> -->
    <style>
        /* 打勾动画 */
        
        input[type=checkbox] {
            display: none;
        }
        
        @-moz-keyframes dothabottomcheck {
            /* 定义第一条线的长度 */
            0% {
                height: 0;
            }
            100% {
                height: 20px;
            }
        }
        
        @-webkit-keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 20px;
            }
        }
        
        @keyframes dothabottomcheck {
            0% {
                height: 0;
            }
            100% {
                height: 20px;
            }
        }
        
        @keyframes dothatopcheck {
            /* 定义第二条线的长度 */
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 35px;
            }
        }
        
        @-webkit-keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 35px;
            }
        }
        
        @-moz-keyframes dothatopcheck {
            0% {
                height: 0;
            }
            50% {
                height: 0;
            }
            100% {
                height: 35px;
            }
        }
        
        .check-box {
            height: 30px;
            width: 30px;
            background-color: transparent;
            border: 1px solid #3C7D75;
            border-radius: 5px;
            position: relative;
            display: inline-block;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -moz-transition: border-color ease 0.2s;
            -o-transition: border-color ease 0.2s;
            -webkit-transition: border-color ease 0.2s;
            transition: border-color ease 0.2s;
            cursor: pointer;
        }
        
        .check-box::before,
        .check-box::after {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            height: 0;
            width: 5px;
            background-color: #3C7D75;
            display: inline-block;
            -moz-transform-origin: left top;
            -ms-transform-origin: left top;
            -o-transform-origin: left top;
            -webkit-transform-origin: left top;
            transform-origin: left top;
            border-radius: 5px;
            content: ' ';
            -webkit-transition: opacity ease .5;
            -moz-transition: opacity ease .5;
            transition: opacity ease .5;
        }
        
        .check-box::before {
            /* 第二条线位置 */
            top: 22px;
            left: 20px;
            -moz-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }
        
        .check-box::after {
            /* 第一条线位置 */
            top: 8px;
            left: 5px;
            -moz-transform: rotate(-36deg);
            -ms-transform: rotate(-36deg);
            -o-transform: rotate(-36deg);
            -webkit-transform: rotate(-36deg);
            transform: rotate(-36deg);
        }
        
        input[type=checkbox]:checked+.check-box,
        .check-box.checked {
            border-color: #3C7D75;
        }
        
        input[type=checkbox]:checked+.check-box::after,
        .check-box.checked::after {
            -moz-animation: dothabottomcheck 0.2s ease 0s forwards;
            -o-animation: dothabottomcheck 0.2s ease 0s forwards;
            -webkit-animation: dothabottomcheck 0.2s ease 0s forwards;
            animation: dothabottomcheck 0.2s ease 0s forwards;
        }
        
        input[type=checkbox]:checked+.check-box::before,
        .check-box.checked::before {
            -moz-animation: dothatopcheck 0.4s ease 0s forwards;
            -o-animation: dothatopcheck 0.4s ease 0s forwards;
            -webkit-animation: dothatopcheck 0.4s ease 0s forwards;
            animation: dothatopcheck 0.4s ease 0s forwards;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="container">

            <h2>点击下方的框框</h2>

            <input type="checkbox" id="cbtest" />

            <label for="cbtest" class="check-box"></label>

        </div>

    </div>
</body>

</html>